import React, { Component } from "react";
import "antd/dist/antd.css";

import store from "../../store/homePage/index";
import {
  deleteItem,
  changeItem,
  getTodoList,
} from "../../store/homePage/actionCreators";
import TodoListUI from "../../component/TodoListUI";

class homePage extends Component {
  constructor(props) {
    super(props);
    store.subscribe(this.handleStoreChange);
  }

  state = store.getState();

  componentDidMount() {
    const action = getTodoList();
    store.dispatch(action);
  }

  handleChange = (e, index) => {
    const action = changeItem(e.target.value, index, e.target.id);
    store.dispatch(action);
  };

  handleStoreChange = () => {
    this.setState(store.getState());
  };

  handleBtnClick = (e) => {
    this.props.history.push("/login");
  };

  handleItemDelete = (e, index) => {
    const action = deleteItem(e.target.id, index);
    store.dispatch(action);
  };

  render() {
    return (
      <TodoListUI
        inputValue={this.state.inputValue}
        handleBtnClick={this.handleBtnClick}
        list={this.state.list}
        handleItemDelete={this.handleItemDelete}
        handleChange={this.handleChange}
      />
    );
  }
}

export default homePage;
